<template>
  <div style="overflow: hidden;">
    <div class="news_header">
      <h1>新闻分类</h1>
     <div><el-button type="primary" @click="open">添加分类</el-button></div> 
    </div>
    <div>
      <el-table :data="cateList">
        <el-table-column width="100" label="序号" type="index"></el-table-column>
        <el-table-column :label="$t('cate.cate_name')"  prop="cate_name"></el-table-column>
        <el-table-column :label="$t('cate.cate_alias')" prop="cate_alias"></el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button :icon="Edit" @click="toEdit(row)" circle type="primary"></el-button>
            <el-button :icon="Delete" @click="toDel(row.id)" circle type="danger"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="newTitle" width="40%" v-model="newsFlag">
        <el-form :model="addForm"  :rules="addRules" ref="cateForm">
          <el-form-item :label="$t('cate.cate_name')" prop="cate_name">
            <el-input v-model="addForm.cate_name"></el-input>
          </el-form-item>
           <el-form-item :label="$t('cate.cate_alias')" prop="cate_alias">
             <el-input v-model="addForm.cate_alias"></el-input>
           </el-form-item>
        </el-form>
        <template #footer>
              <el-button type="primary" @click="toAdd">确定</el-button>
              <el-button type="danger" @click="newsFlag=false">取消</el-button>
        </template>
    </el-dialog>
  </div> 
</template>

<script setup lang="ts">
  import {Edit,Delete} from '@element-plus/icons-vue'
  import {ref,reactive,watch} from 'vue'
  import {addNewsCate,getCateList,updateCate,deleteCate} from '@/api/newscate'
  import type {FormInstance,FormRules} from 'element-plus'
  import { ElMessage } from 'element-plus'
// 获取分类列表
let cateList=ref([])//分类列表数据
let newTitle=ref('添加分类')
let getList=async ()=>{
   let res=await getCateList();
   console.log(res,"------2234------")
   cateList.value=res.data;
}
getList();


  const newsFlag=ref<boolean>(false)

  let open=()=>{
     newTitle.value="添加分类";
     newsFlag.value=true;
  }
  // v-model 的数据
  interface Iform{
    cate_name:string,
    cate_alias:string,
    id:string|number
  }
  let addForm=reactive<Iform>({
    cate_name:"",
    cate_alias:"",
    id:"" //修改的时候需要id
  })
  // 关闭弹窗的时候清空数据
    watch(newsFlag,(newVal)=>{
      if(!newVal){
        addForm.cate_name="";
        addForm.cate_alias="";
        addForm.id="";
      }
    })
  // 验证规则
  let addRules:FormRules={
    cate_name:[
      {required:true,message:"请输入分类名称",trigger:"blur"}
    ],
    cate_alias:[
      {required:true,message:"请输入分类别名",trigger:"blur"}
    ]
  }
 let cateForm=ref<FormInstance|null>()//添加表单组件
 let toAdd= ()=>{
  cateForm.value?.validate(async (vali:boolean)=>{
    if(vali){
      if(addForm.id){
          let editRes=await updateCate(addForm)
           ElMessage.success("修改成功")
      }else{
            let res=await addNewsCate(addForm)
           console.log(res,"--------------")
           ElMessage.success("添加成功")
      }
      cateForm.value?.resetFields()//重置表单
      newsFlag.value=false
      getList();// 重新获取列表
    }
  })
 }
//  点击编辑回显
interface CateType{
  id:number,
  cate_name:string,
  cate_alias:string
}
// 回显--------------------------------------------------
 let toEdit=(row:CateType)=>{
      newsFlag.value=true;
      newTitle.value="编辑分类";
       addForm.cate_name=row.cate_name;
       addForm.cate_alias=row.cate_alias;
       addForm.id=row.id;
 }

//  删除接口
let toDel=async (id:number)=>{
  let res=await deleteCate(id)
   ElMessage.success("删除成功")
   getList();
}
</script>
<style lang="scss">
    .news_header{
      padding: 0 30px;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      background: white;
      margin-top: 30px;
    }
</style>